<template>

	<view class="partOrder">
		<view class="header-block">
			<view :class="[showNav ? 'aa' : '']" style="z-index: 300">
				<global-nav-bar type="black" left-icon="back" color="#333" :title="title" :fixed="false"
					backgroundColor="rgba(0, 0, 0, 0)"></global-nav-bar>

				<view v-if="showNav && total > 15" style="width: 100%">
					<slide-nav-tab-bar @clickitem="clickitem" :actindex="activeitemindex" :list="locationList"
						:borderBottom="borderBottom"></slide-nav-tab-bar>
				</view>
			</view>

			<!-- 头部部分header -->
			<view class="header_item" style="">
				<view class="header_top" @click="toEleDetail">
					<view class="header_top_left">
						<text class="tag" v-for="(item, index) in detailEmerProcTags" :key="index"
							:style="{ color: item.color, borderColor: item.color, }">
							{{ item.label }}
						</text>
						<text style="vertical-align: middle">{{
							eleInfo.elevatorAddress
						}}</text>
						<uni-icons color="#999" size="16" type="arrowright" />
					</view>
					<view class="header_top_right" :style="{ color: eleInfo.isStop === 1 ? '#0091FF' : '#E02020' }"
						@click.stop="changeState">
						<text>{{ eleInfo.isStop === 1 ? "正常运行" : "停梯" }}</text>
						<image v-if="status != 7" :src="`/static/images/${eleInfo.isStop == 1 ? 'blue' : 'red'
							}.png`" mode=""></image>
					</view>
				</view>
				<view class="header_bottom" @click="toInfo" style="display: flex; justify-content: space-between">
					<view class="header_bottomTops">
						<text>{{ eleInfo.brandName || "-" }}</text>
						<text>{{ eleInfo.privateNum || "-" }}</text>
					</view>
					<view v-if="!eleInfo.isFull" style="display: flex; align-items: center">
						<image src="/static/images/tips.png" class="close" style="width: 32rpx; height: 32rpx"></image>
						<uni-icons color="#999" size="18" type="arrowright" />
					</view>
				</view>
			</view>
			<image
				src="https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20221012/c1a6e9996af7e11408d283b788eb2b33.png"
				mode="" class="bg"></image>
		</view>
		<view class="addressBox" @click="toProjectDetail">
			<view class="addressBox_left">
				<view class="top">
					<view class="name">
						<image src="@/static/images/index/buildIcon.svg" mode=""></image>
						<view style="margin-left: 10rpx">{{ eleInfo.buildingName }}</view>
					</view>
				</view>
				<view class="buildAddress" style="display: flex; align-items: center" @click.stop="petName(eleInfo)"
					v-if="eleInfo.relationAlias && eleInfo.relationAlias.length">
					<view class="buildings">项目别名:{{
						eleInfo.relationAlias.map((item) => item.alias).join(",")
					}}</view>
					<view>
						<uni-icons :type="popupShow ? 'arrowup' : 'arrowdown'" size="14" color="#999;"></uni-icons>
					</view>
				</view>
				<view class="buildAddress">{{ eleInfo.buildingAddress }}</view>
			</view>
			<view class="addressBox_right">
				<view class="gpsAndCall">
					<view class="gpsAndCall_item" @click.stop="handleCall(0)"
						v-if="eleInfo.estateUserList && eleInfo.estateUserList.length">
						<image src="@/static/images/phone3.png" mode=""></image>
						<view>物业</view>
					</view>
					<view class="gpsAndCall_item guide" @click.stop="handleGuide">
						<image src="@/static/images/locations.png" mode=""></image>
						<view>导航</view>
					</view>
					<view class="line" v-if="eleInfo.estateUserList && eleInfo.estateUserList.length"></view>
				</view>
			</view>
		</view>
		<!-- header end -->
		<view class="headers" :style="{ paddingTop: paddingTop }">
			<view class="headers-bg"></view>

			<view class="mark">
				<!-- 头部部分 -->

				<!-- 进度条 -->
				<view class="stepContent">
					<view class="stepItme">
						<view class=""
							style="padding: 20rpx 0 32rpx 20rpx;font-size: 32rpx;color: #333333;font-weight: 700;">
							配件更换进度
						</view>
						<view class="steps">
							<stautsStep :actIndex="status - 4" :list="stepList" :log="logs"></stautsStep>
						</view>
						<view style="padding: 20rpx" @click="goTaskSetpPage"><user-list
								:list="detail.planContentUsers"></user-list>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 头部电梯信息end -->

		<!-- 配件信息 -->
		<view class="infocard" v-for="(item, idx) in detailList" :key="item.id">
			<view class="card-title" @click="togglePartCard(idx)">
				<view class="title">配件需求明细({{ idx + 1 }})</view>
				<view class="expanded">
					<text>{{ item.expanded ? '收起' : '展开' }}</text>
					<uni-icons color="#0091FF" size="16" :type="item.expanded ? 'arrowup' : 'arrowdown'"></uni-icons>
				</view>
			</view>
      <view class="info-item">
        <view class="info-item-label">配件类型:</view>
        <view class="info-item-content">{{ item.partsName || "" }}
          <text v-if="item.partsName && item.floorStandNames">({{ item.floorStandNames.replaceAll(',', '>') }})</text>
        </view>
      </view>
			<view class="card-content" v-if="item.expanded">
<!--				<view class="ele-name"> -->
<!--					{{ item.elevatorAddress || "" }} -->
<!--					<text>配件</text> -->
<!--				</view> -->
				<template v-if="item.skuPartsInfo && item.skuPartsInfo.skuItemList">
					<view class="info-item" v-for="(sp, i) in item.skuPartsInfo.skuItemList" :key="i">
						<view class="info-item-label">{{ sp.label || '' }}:</view>
						<view class="info-item-content">{{ sp.value || "" }}{{ sp.unitName || "" }}</view>
					</view>
				</template>
				<view class="info-item" v-else>
					<view class="info-item-label">配件型号:</view>
					<view class="info-item-content">{{ item.partsModel || "" }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">申请数量:</view>
					<view class="info-item-content">{{ item.num || "" }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">备注:</view>
					<view class="info-item-content">{{ item.desc || "" }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label" v-if="item.extWordUrl">附件:</view>
					<view class="info-item-word">
						<view class="fileName" v-for="(file, index) in item.extWordUrl" :key="index"
							  @click="handledownload(file)">
							{{ file.name }}
						</view>
					</view>
				</view>
				<view class="imgs">
					<imageDragSort max="9" :disabled="true" :list="item.otherUrl"></imageDragSort>
				</view>
        <!-- 关联配件信息 -->
        <view class="related-parts-section" v-if="item.relatedPartsList && item.relatedPartsList.length > 0">
          <view class="related-title">关联配件信息</view>
          <view class="related-parts-list">
            <view v-for="(part, partIndex) in item.relatedPartsList" :key="partIndex" class="related-part-item">
              <image v-if="part.picture" @click="previewImage(part.picture)" :src="part.picture" class="part-image"/>
              <view v-else class="empty-image">
                <uni-icons color="#999999" size="20" type="image"></uni-icons>
                <view class="empty-image-text">暂无图片</view>
              </view>
              <view class="part-details">
                <view class="part-name">{{ part.spuName || '--' }}</view>
                <view class="part-info-row">
                  <view class="label">规格型号:</view>
                  <view class="value">{{ formatModel(part) || '--' }}</view>
                </view>
                <view class="part-info-row">
                  <view class="label">物料编号:</view>
                  <view class="value">{{ part.skuCode || '--' }}</view>
                </view>
                <view class="part-info-row">
                  <view class="label">需求数量:</view>
                  <view class="value">{{ part.num || '--' }}<text v-if="part.unitChName">{{part.unitChName}}</text></view>
                </view>
              </view>
            </view>
          </view>
        </view>
			</view>
		</view>
		<!-- 配件信息end -->
		<!-- 最近一次维修保养 -->
		<view class="content_box" style="padding-bottom: 0">
			<view class="content_item" v-if="detail.lastPlanVO"><last-record
					:msg="{ ...detail.lastPlanVO, ...eleInfo }"></last-record></view>
		</view>
		<!-- 关联任务 -->
		<view class="infocard"
			v-if="detail.malDetailVO.faultMessageList && detail.malDetailVO.faultMessageList.length >= 1">
			<view class="title">
				关联任务
				<view class="detail-btn" @click="toRepairDetail">
					详情
					<image src="/static/images/repairFitting/right.png"></image>
				</view>
			</view>
			<view class="ele-name">
				{{ detail.buildingName || "" }}-{{ detail.elevatorAddress || "" }}
				<text class="deep">维修</text>
			</view>
			<view class="main_card_item">
				<view class="label">紧急程度</view>
				<view class="desc">
					<text class="tag" v-for="(it, i) in malDetailEmerProcTags" :key="i"
						:style="{ color: it.color, borderColor: it.color, }">
						{{ it.label }}
					</text>
				</view>
			</view>
			<view class="main_card_item">
				<view class="label">报障状态</view>
				<view class="desc">
					<view :class="['tag', detail.malDetailVO.elevatorStop == 1 ? 'normal' : 'stop']">{{
						detail.malDetailVO.elevatorStop == 1 ? "正常运行" :
							"停梯" }}</view>
				</view>
			</view>

		</view>
		<!-- 关联任务 -->
		<!-- 维修记录 -->
		<view class="content_box">
			<view class="content_item" style="padding-left: 0">
				<view class="title" style="padding-left: 20rpx">维修记录</view>
				<view v-if="malFunctionHistories.length">
					<repair-record v-for="(item, index) in malFunctionHistories" :key="item.id"
						:isPlanStatus="isPlanStatus" :msg="item"
						:isLast="index === malFunctionHistories.length - 1 ? true : false" :index="index"
						:order-status="status" :editing="isEditFlag" :planId="planId" @changeEditStatus="editingRecord"
						@update="updateRecord" @hadDone="handleDone"></repair-record>
				</view>

				<view class="empty flex" v-else>未发现维修记录</view>
			</view>
		</view>
		<!-- 底部占位 -->
		<view class="footer-block"></view>
		<!-- 底部占位end -->
		<!-- 底部部分 -->
		<view class="bottom" v-if="hasRole">
			<!-- <view class="left">
				<view class="left_item" v-for="(item, index) in 2" :key="index" @click="handleCall(index)">
					<view>
						<image src="/static/images/phone.png" mode=""></image>
					</view>
					<view>{{ ['物业', '客服'][index] }}</view>
				</view>
			</view> -->
			<view class="right flex">
				<view class="start flex" v-if="status == 5" @click="nextStepFuc">开始</view>

				<view class="repariing flex" v-if="status == 6">
					<!-- <view
            class="add"
            @click="showStatusChangeBeforeLeave('')"
            v-if="isPlanStatus"
            >签退</view
          > -->
					<view class="add" v-if="!isPlanStatus && userSignCount == 0" @click="nextStepFuc">{{ "开始" }}
					</view>
					<view class="addRecord" v-if="userSignCount != 0" @click="addRecord">添加更换记录
					</view>
					<view @click="handleFinsh(false)" v-if="userSignCount != 0" class="finish">
						<view :style="!showFinish ? 'background:#efefef;color:#ccc' : ''" class="add">维修完成</view>
					</view>
				</view>
				<view class="start flex" v-if="status === 7" style="background-color: #ccc">
					<view>已完成</view>
					<!-- <button hover-class="none" :disabled="true">已完成</button> -->
				</view>
			</view>
		</view>
		<uni-popup ref="popup" :mask-click="true" type="bottom" @close="closeRecord" @updata="updataShowFuc">
			<add-record :partsList="partsList" :disabledParts="disabledParts" :elevatorId="detail.elevatorId" :partsId="detail.partsId" :partsName="detail.partsName"
				:floorStandIds="detail.floorStandIds" :floorStandNames="detail.floorStandNames" v-if="showPoupup"
				@addRecord="handleSubmit" :plan-id="planId" @update="handleSubmit" :restFlag="aa"
				@hadDone="handleDone"></add-record>
		</uni-popup>
		<!-- <uni-popup ref="popupSign">
      <timeSignin
        :type="signType"
        :lists="imgaddress ? [imgaddress] : []"
        :signinData="eleInfo"
        parentStyle="0"
        @close="finishSign"
        @changeImg="changeImg"
      />
    </uni-popup> -->

		<!-- 电梯状态弹窗 -->
		<model title="请选择电梯状态" :maskClick="false" @cancle="cancleChange" @comfire="comfireChange"
			:visible="visibleShowTwo">
			<view class="change_elevator">
				<view @click="changeElevator(1)" :class="elevatorStatus === 1 ? 'actElevator' : ''">正常运行</view>
				<view @click="changeElevator(2)" :class="elevatorStatus === 2 ? 'actElevator' : ''">停梯</view>
			</view>
		</model>
		<!-- 物业电话 -->
		<property-phone ref="property" @bindClose="closePhone" :list="eleInfo.estateUserList"></property-phone>
		<!-- 签退继续圆圈 -->
		<view class="signCircle" v-if="status == 6 && userSignCount != 0"
			:style="{ left: movable.x + 'px', top: movable.y + 'px' }" @touchmove.stop="movableChange"
			@touchend="touchend">
			<view class="add" @click.stop="showStatusChangeBeforeLeave('')" v-if="isPlanStatus">签退</view>
			<view class="add" v-if="!isPlanStatus && userSignCount > 0" @click="nextStepFuc">{{ "继续" }}
			</view>
		</view>
		<!-- 提示上次签到弹框 -->
		<model :title="signType == 'in' ? '签到拍照提示' : '签退拍照提示'" :maskClick="false" @cancle="comfireUseLastImg(false)"
			@comfire="comfireUseLastImg(true)" :visible="visibleShowTwo">
			<view class="lastImg" v-if="planDetail.lastSignImg">
				{{
					`是否使用上次${signType == "in"
						? planDetail.lastSignImg.signTime
						: planDetail.lastSignImg.signOutTime
					}【${signType == "in"
						? planDetail.lastSignImg.signTypeStatusDesc
						: planDetail.lastSignImg.signOutTypeStatusDesc
					}工单】的${signType == "in" ? "签到" : "签退"}拍照?`
				}}
			</view>
		</model>
		<!-- 电梯状态弹窗 -->
		<model title="请选择电梯状态" :maskClick="false" @cancle="cancleChange" @comfire="comfireChange"
			:visible="visibleEleStatus">
			<view class="change_elevator">
				<view @click="changeElevator(1)" :class="elevatorStatus === 1 ? 'actElevator' : ''">正常运行</view>
				<view @click="changeElevator(2)" :class="elevatorStatus === 2 ? 'actElevator' : ''">停梯</view>
			</view>
		</model>
		<!-- 有未签退的工单 -->
		<model title="有未签退的配件任务" :maskClick="false" comfireTxt="去签退" width="500rpx" :showCloseIcon="false"
			@cancle="signOutModelVisible = false" @comfire="toNotSignOutOrder" :visible="signOutModelVisible">
			<not-sign-out-model :msg="checkCanSignOutMsg"></not-sign-out-model>
		</model>
		<!-- 项目别名弹窗 -->
		<aliasPopup :showAlias="popupShow" :aliasArr="aliasArr" @closedMask="closedMask"></aliasPopup>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>

</template>

<script>
import stautsStep from './components/statusStep.vue';
import tabBar from './components/tabBar.vue';
import RepairRecord from './components/repair-record.vue';
import videoDialog from './components/videoDialog.vue';
import unipopup from '@/components/uni-popup/uni-popup.vue';
import timeSignin from '@/components/timeSignin/timeSignin.vue';
import UserList from '@/components/user-list/user-list.vue';
import recordDialog from './components/recordDialog.vue';
// import { location } from '@/apis/maintains.js';
import NotSignOutModel from '../components/notSignOutModel/index.vue';
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import {
	elevtorDetail,
	changeElevatorState,
	changeElevatorStoplog,
} from '@/apis/elevator.js';
import { getSelectWorkTracks } from '@/apis/taskStepPage.js';
import { getDiffYear, getlocalinfo } from '@/utils/utils.js';
import { getDistance } from '@/utils/tools.js'; // 经纬度距离计算
import {
	getPartList,
	getLoaclTypes,
	finishwPartOrder,
	getPlanDetail,
	signIn,
	signOut,
	getPartsDetail,
} from '@/apis/workOrder.js';
import { getConfig, checkCanSignOut } from '@/apis/sign.js';
import { mapState, mapActions } from 'vuex';
import GlobalNavBar from '@/components/uni-nav-bar/global-nav-bar';
import AddRecord from './components/add-record.vue';
import LastRecord from '@/components/last-record/last-record.vue';
import model from '@/components/model/index.vue';
import aliasPopup from '@/components/card-dial/aliasPopup.vue';
export default {
	components: {
		GlobalNavBar,
		LastRecord,
		AddRecord,
		RepairRecord,
		stautsStep,
		tabBar,
		unipopup,
		timeSignin,
		videoDialog,
		UserList,
		recordDialog,
		model,
		NotSignOutModel,
		ImageDragSort,
		aliasPopup
	},
	data() {
		return {
			showMore: false,
			showNav: false,
			isEditFlag: false,
			elevatorYear: '',
			signImg: '',
			sign: false,
			status: 0,
			planStatus: 1,
			title: '',
			topheight: '',
			scrollTop: 0,
			signinData: {},
			planId: '',
			tabIdx: 0,
			eleInfo: {},
			imgaddress: '',
			stepList: [
				{
					status: 5,
					name: '待更换',
					icon: '/static/images/approval/step4.svg',
				},
				{
					status: 6,
					name: '更换中',
					icon: '/static/images/approval/step5.svg',
				},
				{
					status: 7,
					name: '已完成',
					icon: '/static/images/approval/step6.svg',
				},
			],
			btnBoxList: [  // 紧急程度标签
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4', },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3', },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2', },
				{ color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1', },
			],
			logs: [],
			templateList: [],
			planDetail: { users: [] },
			malFunctionHistories: [], // 部件列表
			detail: {
				partsId: '',
				status: '',
				malDetailVO: {},
				otherUrl: [],
				planContentUsers: [],
			},
			showPoupup: false,
			signType: 'in', // 打卡弹窗类型  in 签到 out签退
			showRecordEdit: false,
			isPlanStatus: false, // 我自己是否还未签退
			userSignCount: 0,
			timeWait: null, // 自动滚动定时
			errorView: null,
			reasonList: [],

			elevatorStatus: 1,
			visibleShowTwo: false,
			isOutInState: false, // 提交任务后电梯确定状态
			cantUsersArr: [],

			showLeave: false, // 确定电梯状态后是否走签退逻辑
			handFinish: false, // 签退后是否走维修完成逻辑
			movable: {
				x: 320,
				y: 0,
				height: 0,
				width: 0,
			},
			useLastImg: false, // 是否填充照片
			config: {},
			visibleEleStatus: false, // 改变电梯状态
			tempFilePath: '',
			signOutModelVisible: false,
			checkCanSignOutMsg: {}, // 未签退的工单信息
			popupShow: false,
			overflowShow: false,
			aliasArr: [],
			detailList: [], // 明细列表
			disabledParts: false, // 是否禁用配件选择
			partsList: [] // 多个明细时候更换配件的配件列表固定为多个明细的配件类型
		};
	},
	mounted() {
		uni.getSystemInfo({
			success: (res) => {
				console.log('system', res);
				this.movable.height = res.windowHeight - 100;
				this.movable.y = res.windowHeight - 240;
				this.movable.width = res.windowWidth;
				this.movable.x = this.movable.width - 55;
			},
		});
	},
	computed: {
		...mapState('user', ['userinfo']),
		// 下载附件

		paddingTop() {
			return `calc(${this.topheight} + 44px)`;
		},
		width() {
			return uni.upx2px(355 * 2 - 42);
		},
		showFinish() {
			return this.malFunctionHistories.length > 0;
		},
		partsName() {
			if (!this.detail.partsName) {
				return '';
			}
			return this.detail.partsName.replaceAll('/', '>');
		},
		hasRole() {
			let next = false;
			for (let i = 0; i < this.detail.planContentUsers.length; i++) {
				if (this.detail.planContentUsers[i].userId == this.userinfo.user_id) {
					next = true;
					break;
				}
			}
			return next;
		},
		// 新增：过滤紧急程度标签
		detailEmerProcTags() {
			return this.btnBoxList.filter(item => this.detail.emerProcType == item.key);
		},
		malDetailEmerProcTags() {
			return this.btnBoxList.filter(item => this.detail.malDetailVO && this.detail.malDetailVO.emerProcType == item.key);
		},
	},
	// 监听页面滚动
	onPageScroll(e) {
		// console.log('e.scrollTop',e.scrollTop)
		if (e.scrollTop > 20) {
			this.showNav = true;
			this.title = this.eleInfo.elevatorAddress;
			this.scrollTop = e.scrollTop;
		} else {
			this.title = '配件更换详情';
			this.showNav = false;
		}
	},

	async onLoad(res) {
		console.log(res, 9999);
		this.title = '配件更换详情';
		this.planId = res.planId || '1544943254258638850';
		this.elevatorId = res.elevatorId || '1511958829340868609';

		uni.showLoading({
			title: '加载中',
			mask: true,
		});
		if (!this.userinfo.user_id) {
			uni.showLoading({
				title: '加载中',
			});
			let hasLogin = await this.handleRreshToken();
			if (!hasLogin && !this.userinfo.user_id) {
				this.toLogin();
				return;
			}
		}

		this.initElevtorDetail();
		this.initData();
		uni.hideLoading();
		uni.$on('isFinsh', async (res) => {
			console.log(res, 'isFinsh');
			if (res === true) {
				await this.initData();
				this.handleFinsh(res);
			}
		});
	},
	onUnload() {
		uni.$off('isFinsh');
	},
	onShow() {
		this.initElevtorDetail();
		this.initData();
	},
	methods: {
		...mapActions('user', ['handleRreshToken']),
		// 图片预览
		previewImage(url) {
			if (!url) return;
			uni.previewImage({
				current: url,
				urls: [url],
			});
		},
		// 格式化关联配件的规格
		formatModel(row) {
			if (row.attr) {
				let arr = JSON.parse(row.attr);
				let str = arr.map(
					(item) =>
						(item.key || '') +
                ':' +
                (item.value || '') +
                '' +
                (item.unit ? '(' + item.unit + ')' : '')
				);
				return str.join('; ');
			}
			if (row.skuItemList) {
				let str = row.skuItemList.map(
					(item) =>
						(item.label || '') +
                ':' +
                (item.value || '') +
                '' +
                (item.unitName ? '(' + item.unitName + ')' : '')
				);
				return str.join('; ');
			}
			return '';
		},
		toNotSignOutOrder() {
			uni.navigateTo({
				url: `/subpages/workOrders/partOrder?planId=${this.checkCanSignOutMsg.planId}&elevatorId=${this.checkCanSignOutMsg.elevatorId}`
			});
			this.signOutModelVisible = false;
		},
		// 下载文件
		handledownload(plan) {
			uni.showLoading({
				title: '下载中',
				icon: 'none',
			});

			this.downloadFileUrl = plan.url; // 保存下载地址

			// #ifdef h5
			uni.hideLoading();
			// #endif

			// let str = plan.url.substring(plan.url.indexOf("/") + 44);

			// #ifndef h5
			uni.downloadFile({
				url: plan.url,

				success: (res) => {
					console.log(res, '下载的文件');
					if (res.statusCode === 200) {
						this.tempFilePath = res.tempFilePath;
						console.log(this.tempFilePath, 'this.tempFilePath ');
						this.openFile(plan.type);
						uni.hideLoading();
					}
				},
				fail: (err) => {
					console.log(err, '错误');
					uni.hideLoading();
				},
			});
			// #endif
		},
		openFile(type) {
			console.log(this.tempFilePath, 'this.tempFilePath', '打开文件');

			// #ifdef H5
			sida.openUrl({ url: this.downloadFileUrl });
			uni.hideLoading();
			// #endif

			// #ifndef h5
			uni.openDocument({
				filePath: this.tempFilePath,
				showMenu: true,
				fileType: type.substring(1),
				success: (res) => {
					console.log('打开文档成功');
				},
				fail: (err) => {
					console.log(err);
				},
			});
			// #endif
		},
		// 获取上次照片
		movableChange(e) {
			// console.log('movableChange', e)
			let x = e.touches[0].pageX - 56 / 2;
			let y = e.touches[0].clientY - 56 / 2;
			if (x < 8) {
				x = 8;
			}
			if (x > 330) {
				x = 330;
			}
			if (y < 70) {
				y = 70;
			}
			if (y > this.movable.height + 5) {
				y = this.movable.height + 5;
			}
			this.movable.x = x;
			this.movable.y = y;
		},
		touchend(res) {
			if (this.movable.x < 156) {
				this.movable.x = 8;
			} else {
				this.movable.x = this.movable.width - 55;
			}
		},
		closePhone() {
			this.$nextTick(() => {
				this.$refs.property.$refs.propertyPhone.close();
			});
		},
		getAliasStr(str) {
			if (!str) {
				return '';
			}
			if (str.length > 20) {
				return '(项目别名：' + str.slice(0, 20) + '...)';
			} else {
				return '(项目别名：' + str + ')';
			}
		},
		// 导航
		handleGuide() {
			const { buildingName, relationAlias, latitude, longitude, buildingAddress } = this.eleInfo;
			let alias = relationAlias;
			let aliasName = alias.length ? alias.map((item) => {
				return item.alias;
			}).join(',') : '';
			uni.getLocation({
				type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
				success: (res) => {
					uni.openLocation({
						latitude: Number(latitude),
						longitude: Number(longitude),
						scale: 18,
						name: buildingName + this.getAliasStr(aliasName),
						address: buildingAddress,
						success: () => {
							console.log('success');
						},
					});
				},
			});
		},
		// 查看维修详情
		toRepairDetail() {
			uni.navigateTo({
				url: `/subpages/repair/repariDetail?planId=${this.detail.malDetailVO.planId}&elevatorId=${this.detail.elevatorId}`,
			});
		},
		// 跳转电梯详情
		toEleDetail() {
			uni.navigateTo({
				url: `/subpages/elevator/projectInfo/eleDetail?id=${this.detail.elevatorId}`,
			});
		},
		// 跳转项目详情
		toProjectDetail() {
			uni.navigateTo({
				url: '/pageModules/projectInfo/detail?id=' + this.eleInfo.buildingId,
			});
		},
		// 获取任务跟踪进度条
		getSelectWorkTracks() {
			return new Promise((resolve) => {
				getSelectWorkTracks({ planId: this.planId }).then((res) => {
					let workLogs = res.data.workLogs;
					let logs = [];
					for (let i = 0; i < this.stepList.length; i++) {
						let createTime = '';
						for (let j = 0; j < workLogs.length; j++) {
							if (workLogs[j].planStatus == this.stepList[i].status) {
								createTime = workLogs[j].createTime;
								break;
							}
						}
						logs.push({ createTime });
					}
					this.logs = logs;
					// this.$forceUpdate();
					resolve();
				});
			});
		},
		// 弹窗提示
		changeState() {
			if (this.status === 7) {
				uni.showToast({
					title: '任务已完成',
					icon: 'none',
				});
				return;
			}
			if (!this.isPlanStatus) {
				uni.showModal({
					title: '提示',
					content: '请先签到开始再进行操作',
					showCancel: false,
				});
				return;
			}
			this.visibleEleStatus = true;
			// this.visibleShowTwo = true;
		},
		cancleChange() {
			this.visibleEleStatus = false;
			this.elevatorStatus = this.eleInfo.isStop;
		},
		// 更改电梯状态
		changeElevator(nums) {
			this.elevatorStatus = nums;
		},
		// 确定电梯状态更改
		comfireChange() {
			uni.showLoading({
				title: '加载中',
				icon: 'none',
			});
			if (this.isOutInState) {
				// 提交任务电梯状态选确定时
				this.isOutInState = false;
				if (this.cantUsersArr.length > 0) {
					this.postPlan();
				} else {
					this.finish();
				}
			}
			if (this.eleInfo.isStop === this.elevatorStatus) {
				uni.hideLoading();
				this.visibleEleStatus = false;
				if (this.showLeave) {
					this.finishOut('');
				}
				return;
			}
			changeElevatorState({
				id: this.elevatorId,
				isStop: this.elevatorStatus,
			})
				.then((res) => {
					if (res.code === 200) {
						uni.hideLoading();
						uni.showToast({
							title: '电梯状态切换成功',
							icon: 'none',
						});
						this.visibleEleStatus = false;
						if (this.showLeave) {
							this.finishOut('');
						}
						changeElevatorStoplog({
							elevatorId: this.elevatorId,
							initStatus: this.eleInfo.isStop,
							setStatus: this.elevatorStatus,
							module: `${this.planId}`,
							position: 6
						}).then((res) => { });
						this.initElevtorDetail();
					}
				})
				.catch((err) => {
					uni.hideLoading();
				});
		},

		updataShowFuc(val) {
			this.showPoupup = val;
		}, // 查看是否有正在编辑的记录
		editingRecord({ isEdit }) {
			this.isEditFlag = isEdit;
			console.log(this.isEditFlag, '是否有编辑中的数据');
		}, // 保存提交按钮
		updateRecord({ isEdit, type }) {
			console.log(type, isEdit);
			this.isEditFlag = isEdit;
			this.initData();
		},
		// 多人维修检查状态
		handleDone() {
			console.log('工单完成');
			uni.showToast({
				title: '工单状态已更新,请重新进入页面',
				icon: 'none',
			});
			setTimeout(() => {
				uni.navigateBack({});
			}, 500);
		},
		// 添加记录
		addRecord() {
			console.log('添加');
			if (!this.isPlanStatus) {
				uni.showToast({
					title: '请先签到后在进行添加',
					icon: 'none',
				});
				return;
			}
			// this.showAddDialog=true
			if (this.isEditFlag) {
				uni.showToast({
					title: '尚有未保存的记录',
					icon: 'none',
				});
			} else {
				if (this.detailList.length === 1) {
					this.disabledParts = (this.detailList.length === 1);
				} else {
					this.partsList = this.detailList.map(item => {
						return {
							partsId: item.partsId,
							partsName: item.partsName,
							floorStandIds: item.floorStandIds,
							floorStandNames: item.floorStandNames,
						};
					});
				}
				this.$refs.popup.open();
			}
		},
		// 关闭提交按钮
		handleSubmit() {
			// this.showAddDialog=false
			this.$refs.popup.close();
			this.aa = '1';
			this.initData();
		},

		// 我自己是否还未签退
		setIsPlanStatus() {
			for (let i = 0; i < this.detail.planContentUsers.length; i++) {
				if (
					this.detail.planContentUsers[i].userId == this.userinfo.user_id &&
					this.detail.planContentUsers[i].signUser
				) {
					this.userSignCount = this.detail.planContentUsers[i].userSignCount;
					console.log('我自己是否还未签退', this.detail.planContentUsers[i]);
					return this.detail.planContentUsers[i].signUser.isPlanStatus;
				}
			}
			this.userSignCount = 0;
			return false;
		},
		addrecordFuc(form) {
			this.showRecordEdit = true;
			this.$refs['recordDialog'].initData(form);
		},
		// 任务状态详情，维保员列表等信息
		getPlanDetail() {
			return new Promise((resolve) => {
				getPlanDetail({ planId: this.planId }).then((res) => {
					this.planDetail = res.data;
					//  console.log(res.data,"信息")
					resolve();
				});
			});
		},
		// 配件申请详情
		getPartsDetail() {
			return new Promise((resolve) => {
				getPartsDetail({ planId: this.planId }).then((res) => {
					// res.data.partsName = res.data.partsName.replace(/&amp;&amp;/g, '/');
					this.malFunctionHistories = res.data.malFunctionHistories || [];
					res.data.planContentUsers = res.data.planContentUsers ? res.data.planContentUsers : [];
					if (res.data.partsList.length === 1) {
						res.data.partsName = res.data.partsList[0].partsName.replace(/&amp;&amp;/g, '>');
						res.data.partsId = res.data.partsList[0].partsId;
						res.data.floorStandIds = res.data.partsList[0].floorStandIds;
						res.data.floorStandNames = res.data.partsList[0].floorStandNames;
					} else {
						res.data.partsName = '';
						res.data.partsId = '';
						res.data.floorStandIds = '';
						res.data.floorStandNames = '';
					}
					this.detail = res.data;
					if (res.data.partsList && res.data.partsList.length > 0) {
						this.detailList = res.data.partsList.map(item => {
							let obj = {
								...item,
								partsName: item.partsName.replace(/&amp;&amp;/g, '>'),
								expanded: true
							};
							if (item.skuList && item.skuList.length > 0) {
								obj.relatedPartsList = item.skuList.map(v => ({...v,  ...v.finallySkuPartsInfo}));
							}
							return obj;
						});
						console.log(this.detailList, '详情列表');
					}
					this.status = res.data.status;
					this.isPlanStatus = this.setIsPlanStatus();
					this.$forceUpdate();
					resolve();
				});
			});
		},
		// 任务追踪页面
		goTaskSetpPage() {
			// this.eleInfo.planCheckType = 9; //专项保养
			let arr = this.templateList.map((item) => item.templateName);
			console.log(arr, 'arr的至');
			this.eleInfo.planId = this.planId;
			// uni.navigateTo({
			//   url:
			//     "./components/taskStepPage?obj=" +
			//     JSON.stringify(this.eleInfo) +
			//     "&list=" +
			//     JSON.stringify(arr) +
			//     "&partsID=" +
			//     this.planId,
			// });
			uni.navigateTo({
				url: '/subpages/workOrders/components/taskStepPage?obj=' +
					JSON.stringify(this.eleInfo) +
					'&list=' +
					JSON.stringify(arr) +
					'&partsID=' +
					this.planId,
				fail: (err) => {
					console.log(err);
				},
			});
		},
		// 完成添加工作项描述记录
		finishAddRecord() {
			this.initData();
		},

		// 获取电梯详情信息
		initElevtorDetail() {
			elevtorDetail({
				elevatorId: this.elevatorId,
			}).then((res) => {
				if (res.code === 200) {
					let obj = res.data || {};
					if (Object.keys(obj).length) {
						this.eleInfo = obj;
						this.elevatorStatus = obj.isStop;
						let tempDate = obj.madeDate ? obj.madeDate.substring(0, 10) : 0;
						this.elevatorYear = tempDate !== 0 ? getDiffYear(tempDate) : '';
					}
				}
			});
		},

		// 维修完成
		async handleFinsh(res) {
			if (this.malFunctionHistories.length == 0) {
				return;
			}

			await this.getPartsDetail();

			// this.isOutInState = true;
			// this.visibleShowTwo = true;
			this.finish(res);
		},
		// 获取开关按钮
		getConfig() {
			return new Promise((resolve) => {
				getConfig().then((res) => {
					if (res) {
						this.config = res.data.config;
						// console.log(this.config, "this.config");
					}
				});
				resolve();
			});
		},

		// 签退前确定电梯状态
		showStatusChangeBeforeLeave(res) {
			// console.log(res, "看看res是什么", "维修");
			let isFinsh = res ? true : false;
			this.handFinish = isFinsh;
			this.signType = 'out';
			const data = {
				signType: this.signType == 'in' ? 1 : 2,
				useLastImg: this.useLastImg,
				orderType: 3,
			};
			uni.setStorage({
				key: 'signObj',
				data,
			});
			if (this.config.partSignOut == 1) {
				if (
					this.planDetail.lastSignImg &&
					this.planDetail.lastSignImg.signOutImage
				) {
					// 这里弹出弹框提示是否使用上次的照片
					this.visibleShowTwo = true;
				} else {
					uni.navigateTo({
						url: `/pages/sign/index?planId=${this.planId}&elevatorId=${this.elevatorId}&isFinsh=${isFinsh}`,
					});
				}
			} else {
				uni.navigateTo({
					url: `/pages/sign/index?planId=${this.planId}&elevatorId=${this.elevatorId}&isFinsh=${isFinsh}`,
				});
			}
		},
		// 签退 post==> 是否签退后立即执行提交操作
		async finishOut() {
			console.log(post, '签退');
			const post = this.handFinish ? true : false;
			this.showLeave = false;
			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.showModal({
					title: '提示',
					content: '请打开定位，再签退',
					showCancel: false,
				});
				return;
			}
			// 计算是否范围内打卡
			let distance = getDistance(
				localInfo.latitude,
				localInfo.longitude,
				this.eleInfo.latitude,
				this.eleInfo.longitude
			);
			if (distance > this.$config.maxDistance) {
				uni.showModal({
					title: '提示',
					content: '当前不在项目位置,是否确定按照当前位置继续签退？',
					success: (res) => {
						if (res.confirm) {
							this.signType = 'out';
							this.signinData = { post: post || false };
							this.$refs.popupSign.open('center');
						}
					},
				});

				return;
			}
			this.signType = 'out';
			this.signinData = {
				post: post || false,
			};
			this.$refs.popupSign.open('center');
			return;
		},

		async initData() {
			await this.getPartsDetail();
			this.getPlanDetail();
			this.getSelectWorkTracks();

			await this.getConfig();
		},

		handleBack() {
			uni.navigateBack({});
		},

		// 验证是否有权限

		getPlanRole() {
			console.log(this.planDetail);
			let next = false;
			for (let i = 0; i < this.detail.planContentUsers.length; i++) {
				if (this.detail.planContentUsers[i].userId == this.userinfo.user_id) {
					next = true;
					break;
				}
			}
			if (!next) {
				uni.showModal({
					title: '提示',
					content: '你没有权限操作该任务',
					showCancel: false,
				});
			}
			return next;
		},

		// 底部下一步按钮
		async nextStepFuc() {
			if (this.getPlanRole() == false) {
				return;
			}
			let date = new Date(this.planDetail.planDate.replace(/-/g, '/'));
			let now = new Date();
			now.setHours(0, 0, 0);
			console.log(now.getTime() + 1000 * 60 * 60 * 24 + 2000, date.getTime());
			if (date.getTime() > now.getTime() + 1000 * 60 * 60 * 24 - 2000) {
				uni.showModal({
					title: '提示',
					content: '任务未到可执行时间',
					showCancel: false,
				});
				return true;
			}
			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.showModal({
					title: '提示',
					content: '请打开定位，再签到',
					showCancel: false,
				});
				return;
			}
			let isAllow = await this.checkAllowSignFun();
			if (isAllow.isExist) {
				this.checkCanSignOutMsg = isAllow;
				this.signOutModelVisible = true;
				return;
			}

			// 计算是否范围内打卡
			let distance = getDistance(
				localInfo.latitude,
				localInfo.longitude,
				this.eleInfo.latitude,
				this.eleInfo.longitude
			);
			// if (distance > this.$config.maxDistance) {
			//   uni.showModal({
			//     title: "提示",
			//     content: "当前不在项目位置,是否确定按照当前位置继续签到？",
			//     success: (res) => {
			//       if (res.confirm) {
			//         this.signFuc();
			//       }
			//     },
			//   });

			//   return;
			// }
			this.signFuc();
		},

		changeImg(res) {
			this.imgaddress = res[0];
		},
		// 签到确定
		async finishSign(e) {
			if (e != 1) {
				uni.hideLoading();
				this.$refs.popupSign.close('center');
				return;
			}
			let that = this;

			if (this.imgaddress) {
				await this.getPartsDetail();
				if (this.signType == 'in') {
					if (this.status >= 7 || this.isPlanStatus) {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: '签到失败，工单状态已改变',
							showCancel: false,
						});
						return;
					}
				} else {
				}

				let localInfo = await this.getLocalInfo();
				let address = await getlocalinfo(
					localInfo.latitude,
					localInfo.longitude
				);
				let signStatus = 1;
				// 计算是否范围内打卡
				let distance = getDistance(
					localInfo.latitude,
					localInfo.longitude,
					this.eleInfo.latitude,
					this.eleInfo.longitude
				);
				if (distance > this.$config.maxDistance) {
					signStatus = 2;
				}
				// uni.hideLoading()
				// return

				(this.signType == 'in' ? signIn : signOut)(
					this.signType == 'in'
						? {
							userId: that.userinfo.user_id,
							planId: that.planId,
							signImage: that.imgaddress,
							signStatus: signStatus,
							signLongitude: localInfo.longitude,
							signLatitude: localInfo.latitude,
							signAddress: address.result.address,
						}
						: {
							userId: that.userinfo.user_id,
							planId: that.planId,
							signOutImage: that.imgaddress,
							signOutStatus: signStatus,
							signOutLongitude: localInfo.longitude,
							signOutLatitude: localInfo.latitude,
							signOutAddress: address.result.address,
						}
				).then(async (res) => {
					await this.getPartsDetail();
					uni.hideLoading();
					if (this.signType != 'in') {
						this.isPlanStatus = false;
					}

					that.reportAddress({
						longitude: localInfo.longitude,
						latitude: localInfo.latitude,
						userId: that.userinfo.user_id,
						operation: that.signType == 'in' ? 2 : 3,
						planId: that.planId,
						recordType: 1, // 工单定位
					}); // 定位上报埋点
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						mask: true,
					});
					setTimeout(() => {
						console.log('立即执行提交', this.signinData.post);
						if (this.signinData.post) {
							// 立即执行提交
							that.imgaddress = '';
							that.$refs.popupSign.close();
							this.postPlan(0, true);
						} else {
							that.imgaddress = '';
							that.$refs.popupSign.close();
							that.initData();
						}
						if (this.signType == 'in') {
							this.visibleShowTwo = true;
						}
					}, 700);
				});
			} else {
				uni.hideLoading();
				uni.showToast({
					title: '请拍照',
					icon: 'none',
				});
			}
		},
		// 点击提交完成方法
		async finish(res) {
			// res传了true代表马上执行维修完成
			if (res) {
				this.postPlan();
				return;
			}
			this.handFinish = false;
			if (this.getPlanRole() == false) {
				return;
			}

			uni.showModal({
				title: '',
				content: '任务完成-配件是否更换完成?',
				success: async (res) => {
					if (res.confirm) {
						uni.showLoading({
							title: '加载中',
							mask: true,
						});
						await this.getPartsDetail();
						if (this.isPlanStatus) {
							uni.hideLoading();
							this.handFinish = true;
							this.showStatusChangeBeforeLeave(true);
							return;
						}

						// 如果正在编辑不可提交
						if (this.isEditFlag) {
							uni.hideLoading();
							uni.showToast({
								title: '尚有未保存的记录',
								icon: 'none',
							});
							return;
						}
						// 提交任务方法
						this.postPlan();
					}
				},
			});
		},
		// 提交任务
		async postPlan(type, isComState) {
			uni.hideLoading();

			let cantUsers = [];
			if (this.detail.planContentUsers) {
				for (let i = 0; i < this.detail.planContentUsers.length; i++) {
					if (this.detail.planContentUsers[i].userId == this.userinfo.user_id) {
						if (
							this.detail.planContentUsers[i].signUser &&
							this.detail.planContentUsers[i].signUser.isPlanStatus
						) {
							uni.hideLoading();
							this.finishOut(1);

							return;
						}
					} else {
						if (
							this.detail.planContentUsers[i].signUser &&
							this.detail.planContentUsers[i].signUser.isPlanStatus
						) {
							cantUsers.push(this.detail.planContentUsers[i].userName);
						}
					}
				}
			}

			uni.hideLoading();
			this.cantUsersArr = cantUsers;
			// if (isComState) {
			// 	//这里处理整体流程在电梯状态弹窗后进行
			// 	this.isOutInState = true;
			// 	this.visibleShowTwo = true;
			// 	return;
			// }

			if (cantUsers.length > 0 && type != 1) {
				uni.showModal({
					title: '提示',
					content: `同伴${cantUsers.join(
						'、'
					)}未签退，确定择强制完成，同伴自动签退；取消则等同伴签退`,
					success: (res) => {
						if (res.confirm) {
							this.postPlan(1);
						}
					},
				});
				return;
			}
			let localInfo = await this.getLocalInfo();
			if (!localInfo.latitude) {
				uni.showModal({
					title: '提示',
					content: '请打开定位，再提交',
					showCancel: false,
				});
				return;
			}

			uni.showLoading({
				title: '提交中',
				mask: true,
			});

			let address = await getlocalinfo(localInfo.latitude, localInfo.longitude);
			let signStatus = 1;
			// 计算是否范围内打卡

			finishwPartOrder({
				id: this.planId,
				commitAddress: address.result.address,
				commitLongitude: localInfo.longitude,
				commitLatitude: localInfo.latitude,
			})
				.then((res) => {
					uni.hideLoading();
					/* 定位上报埋点*/
					this.reportAddress({
						longitude: localInfo.longitude,
						latitude: localInfo.latitude,
						userId: this.userinfo.user_id,
						operation: 5,
						planId: this.planId,
						recordType: 1, // 提交
					});
					/* 定位上报埋点 end*/
					uni.showToast({
						title: '提交成功',
					});
					setTimeout(() => {
						this.getPartsDetail();
						this.initElevtorDetail();
						this.initData();
					}, 500);
				})
				.catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						icon: 'none',
					});
					setTimeout(() => {
						this.initData();
					}, 1000);
				});
		},
	 
		telPhone(phone) {
			if (!phone) {
				uni.showToast({
					title: '暂无电话',
					icon: 'none',
				});
				return;
			}
			uni.makePhoneCall({
				phoneNumber: String(phone),
			});
		},
		// 签到流程
		async signFuc(obj = {}) {
			let _this = this;

			this.signType = 'in';
			this.signinData = obj;
			this.handFinish = false;
			// return;
			const data = {
				signType: this.signType == 'in' ? 1 : 2,
				useLastImg: this.useLastImg,
				orderType: 3,
			};
			uni.setStorage({
				key: 'signObj',
				data,
			});
			if (this.config.partSignIn == 1) {
				if (
					this.planDetail.lastSignImg &&
					this.planDetail.lastSignImg.signImage
				) {
					// 这里弹出弹框提示是否使用上次的照片
					this.visibleShowTwo = true;
				} else {
					uni.navigateTo({
						url: `/pages/sign/index?planId=${this.planId}&elevatorId=${this.elevatorId}`,
					});
				}
			} else {
				uni.navigateTo({
					url: `/pages/sign/index?planId=${this.planId}&elevatorId=${this.elevatorId}`,
				});
			}
			// 这里判断是否存在上次拍照的记录
			// this.$refs.popupSign.open("center");
		},
		// 是否使用上次签到签退照片
		comfireUseLastImg(res) {
			console.log(this.handFinish, 8888);
			this.visibleShowTwo = false;
			this.useLastImg = res;
			let data = {
				signType: this.signType == 'in' ? 1 : 2,
				useLastImg: this.useLastImg,
				orderType: 3,
			};
			uni.setStorage({
				key: 'signObj',
				data,
			});
			uni.navigateTo({
				url: `/pages/sign/index?planId=${this.planId}&elevatorId=${this.elevatorId}&isFinsh=${this.handFinish}`,
			});
		},

		// 预览
		preViewFile(list, index) {
			console.log('预览照片', list, index);
			this.$previewMedia({
				sources: list,
				current: index,
			});
		},
		// 自动滚动到区域内
		scrollToViewFuc(res) {
			if (this.errorView) {
				return;
			}

			this.errorView = res.workitem;
			console.log(
				res.workitem.name,
				res,
				res[0].top,
				this.scrollTop,
				res[0].top - 100 + this.scrollTop
			);

			uni.pageScrollTo({
				scrollTop: res[0].top - 100 + this.scrollTop, // 滚动到页面节点的上边界坐标
				duration: 400, // 滚动动画的时长
			});
		},

		// 电梯信息详情页
		toInfo() {
			uni.navigateTo({
				url: '/subpages/elevator/projectInfo/elevatorInfoPage?id=' + this.elevatorId,
			});
		},
		// 拨打电话
		handleCall(index) {
			uni.makePhoneCall({
				phoneNumber: index === 0 ? this.planDetail.estateTel : '0760-88814888',
			});
		},
		// 地图导航
		toMap() {
			let alias = this.eleInfo.relationAlias;
			let aliasName = alias.length ? alias.map((item) => {
				return item.alias;
			}).join(',') : '';
			uni.openLocation({
				latitude: Number(this.eleInfo.latitude),
				longitude: Number(this.eleInfo.longitude),
				name: this.eleInfo.buildingName,
				address: aliasName ? '项目别名：' + aliasName : '',
				fail: (err) => {
					console.log(err);
				},
			});
		},
		// 判断是否可以签到
		checkAllowSignFun() {
			return new Promise((resolve) => {
				checkCanSignOut({ planId: this.planId }).then((res) => {
					if (res) {
						resolve(res.data);
					}
				});
			});
		},
		// 项目别名弹窗
		petName(obj) {
			this.popupShow = true;
			this.overflowShow = true;
			this.aliasArr = (obj.relationAlias || []).map((item) => item.alias);
		},
		closedMask(e) {
			this.overflowShow = false;
			this.popupShow = false;
		},
		// 添加切换展开/收起的方法
		togglePartCard(idx) {
			this.detailList[idx].expanded = !this.detailList[idx].expanded;
			this.$forceUpdate();
		},
	},
};
</script>

<style lang="scss" scoped>
.partOrder {
	width: 100%;
	background-color: #f3f6f8;
	overflow: hidden;
	overflow-y: scroll;
}

.signCircle {
	height: 80rpx;
	width: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0091ff;
	color: #fff;
	position: fixed;
	z-index: 200;
	border-radius: 50%;
}

.nabvar {
	position: fixed;
	top: 0;
	z-index: 100;
}

.addressBox {
	display: flex;
	width: 710rpx;
	margin: 0 auto;
	background: #fff;
	border-radius: 8rpx;
	font-size: 24rpx;
	padding: 20rpx 16rpx 16rpx 16rpx;
	font-size: 24rpx;
	color: #999;
	box-sizing: border-box;
	position: relative;
	z-index: 110;
	margin-bottom: 20rpx;

	.top {
		display: flex;

		.name {
			display: flex;
			// padding-left: 14rpx;
			font-weight: 600;
			color: #333;
			align-items: center;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.buildAddress {
		padding: 0 20rpx 0 32rpx;
		margin-left: 10rpx;

		.buildings {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 388rpx;
			font-size: 20rpx;
			color: #666;
		}
	}

	.addressBox_left {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.addressBox_right {
		display: flex;
		width: 200rpx;
		justify-content: flex-end;
		align-items: center;

		.gpsAndCall {
			position: relative;
			display: flex;
			align-items: center;
			width: 190rpx;
			color: #666;
			height: 32rpx;

			.gpsAndCall_item {
				display: flex;
				flex: 1;
			}

			.guide {
				justify-content: flex-end;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.line {
				width: 2rpx;
				height: 24rpx;
				background: #e9e9e9;
				position: absolute;
				left: 50%;
				top: 6rpx;
			}
		}
	}
}

.aa {
	position: fixed;
	z-index: 300;
	width: 100%;
	overflow: auto;
	background-color: #fff;
	box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
}

.header-block {
	background: #f3f6f8;
	// height: 315rpx;

	.bg {
		width: 376rpx;
		height: 366rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.header_item {
		padding: 28rpx 40rpx;
		// height: 400rpx;
		// background: #f3f6f8;
	}

	.header_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4rpx;
		position: relative;
		z-index: 300;

		.header_top_left {
			font-size: 38rpx;
			color: #333;
			font-weight: bold;
			width: 440rpx;

			.tag {
				font-size: 24rpx;
				padding: 0rpx 9rpx;
				font-weight: normal;
				margin: 1px;
				border-radius: 4rpx;
				line-height: 32rpx;
				height: 32rpx;
				white-space: nowrap;
				border: 2rpx solid transparent;
			}
		}

		.header_top_right {
			background: #fff;
			border-radius: 8rpx;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
			position: absolute;
			right: 0;
			top: 4rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
			}
		}
	}

	.header_bottom {
		font-size: 24rpx;
		color: #666;
		position: relative;
		z-index: 100;
	}

	.header_bottomTops {
		text:nth-child(1) {
			padding-right: 10rpx;
			border-right: 2rpx solid #ccc;
		}

		text:nth-child(2) {
			padding-left: 10rpx;
		}
	}
}

.headers {
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;

	&-bg {
		width: 750rpx;
		height: 354rpx;
		padding-top: 40rpx;
		// background: linear-gradient(0deg, #deedf8, #deedf8);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
		// box-shadow: 5px 10px 15px #e3eff8;
		position: absolute;
		top: 0;
	}

	.progressBar_elevator {
		width: 710rpx;
		margin: 0 auto;
		background: #fff;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		display: flex;
		height: 84rpx;
		line-height: 84rpx;
		z-index: 300;
		margin-top: 20rpx;

		view:nth-of-type(1) {
			flex: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-left: 20rpx;
		}

		view:nth-of-type(2) {
			flex: 0 0 200rpx;
			text-align: right;
			font-size: 26rpx;
			color: #0091ff;
			border-radius: 8rpx;
			padding: 0rpx 30rpx;
			vertical-align: middle;

			text {
				margin-right: 8rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
			}
		}
	}

	.stepContent {
		margin: 0 20rpx;

		// padding: 20rpx;
		.stepItme {
			background-color: #fff;
			border-radius: 8rpx;

			&-title {
				height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				text-align: left;
				color: #333333;
				line-height: 88rpx;
				padding: 0 20rpx;
				border-bottom: 2rpx solid #e9e9e9;
			}
		}

		.steps {
			padding: 20rpx;
			z-index: 9;
			// margin: 30rpx 0;
			padding-top: 40rpx;
			margin-bottom: 0;
			background: #fff;
			border-radius: 8rpx;
			// width: 710rpx;
			box-sizing: border-box;
		}
	}

	.mark {
		z-index: 9;
		background: linear-gradient(0deg,
				rgba(243, 246, 248, 1),
				rgba(243, 246, 248, 0));
	}

	&-info {
		.header_item {
			display: flex;
			justify-content: space-between;
		}

		.toInfo {
			position: relative;
			z-index: 100;
		}

		margin: 0rpx 40rpx;
		z-index: 9;
		position: relative;
		padding: 20rpx 0;
		padding-top: 40rpx;

		// background-color: linear-gradient(0deg,rgba(226, 239, 248, 0.931), rgba(226, 239, 248, 0.931));
		&-name {
			font-size: 42rpx;
			color: #333;
			font-weight: bold;
			width: 560rpx;
			display: flex;
			flex-wrap: wrap;
		}

		&-tag {
			font-size: 24rpx;
			color: #999;
			padding-top: 7rpx;
		}

		.next-btn {

			// position: absolute;
			// bottom: 30rpx;
			// right: 0;
			// z-index: 99;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.top_R {
			position: absolute;
			top: 50rpx;
			right: 0;
			z-index: 99;
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}

.content_box {
	padding: 0 20rpx;
	background-color: #f3f6f8;
	padding-bottom: 150rpx;
	position: relative;
	margin-top: 20rpx;

	// z-index: 100;
	.content_item {
		margin-bottom: 20rpx;
		padding: 28rpx 20rpx;
		border-radius: 8rpx;
		background: #ffffff;

		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			// padding-bottom: 22rpx;
		}

		.des {
			margin-bottom: 20rpx;

			:nth-child(2) {
				margin-bottom: 16rpx;
				color: #333;
				font-size: 28rpx;
			}
		}

		.faultImg {
			display: flex;
			flex-wrap: wrap;

			// margin: 20rpx 0;
			image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 18rpx;
			}
		}

		.label {
			margin-right: 24rpx;
			color: #999999;
			font-size: 28rpx;
			width: 112rpx;
		}

		.status_content {
			display: flex;
			flex-wrap: wrap;
			flex: 1;
		}

		.statusFault {
			padding: 0rpx 12rpx;
			border-radius: 8rpx;
			font-size: 26rpx;
			margin-bottom: 20rpx;
		}

		.stop {
			border: 2rpx solid #e02020;
			color: #e02020;
			margin-right: 12rpx;
		}

		.normal {
			border: 2rpx solid #0091ff;
			color: #0091ff;
			margin-right: 12rpx;
		}

		.orderfalutDes {
			:nth-child(1) {
				width: 200rpx;
			}

			margin-bottom: 40rpx;
		}

		.time {
			color: #999;
			font-size: 28rpx;
			// margin-top: 40rpx;
		}
	}

	.faultReasonContent {
		padding: 0 20rpx;

		.faultReasonItem {
			margin-bottom: 40rpx;

			.label {
				color: #999;
				width: 100%;
				margin-bottom: 16rpx;
			}

			.falutLabel {
				display: flex;
				flex-wrap: wrap;

				view {
					padding: 4rpx 24rpx;
					font-size: 28rpx;
					border: 2rpx solid #0091ff;
					border-radius: 8rpx;
					color: #0091ff;
					margin-right: 20rpx;
					margin-top: 12rpx;
				}
			}
		}

		.msg {
			font-size: 24rpx;
			color: #999999;
			margin-top: 16rpx;

			view {
				height: 34rpx;
			}
		}
	}

	.progressBar {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;

		.progressBar_content {
			width: 710rpx;
			// height: 284rpx;
			background: #ffffff;
			border-radius: 8rpx;
			padding: 24rpx 22rpx 0rpx 18rpx;
			box-sizing: border-box;

			.progressBar_item {
				padding-bottom: 24rpx;
			}
		}
	}
}

.card {
	width: calc(100% - 40rpx);
	background-color: #fff;
	min-height: 1100rpx;
	border-radius: 8rpx;
	margin: 20rpx auto;
	position: relative;

	.title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: left;
		color: #333333;
		padding: 28rpx 20rpx;
	}

	.temp-list {
		width: 100%;
		margin-top: 20rpx;

		&-name {
			border-left: 5rpx solid #0091ff;
			padding-left: 16rpx;
		}
	}

	.sign-item {
		width: calc(100% - 40rpx);
		padding: 20rpx;

		&-name {
			font-size: 32rpx;
			padding-bottom: 20rpx;
		}
	}
}

.footer-block {
	width: 100%;
	// height: 200rpx;
}

.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 200;
	background-color: #fff;
	height: 100rpx;
	width: 100%;
	display: flex;
	padding: 0 18rpx;
	box-sizing: border-box;

	view {
		// height: 100%;
		display: flex;
		align-items: center;
	}

	.left {
		width: 200rpx;
		font-size: 20rpx;

		.left_item {
			display: flex;
			flex-direction: column;
			flex: 1;

			view {
				width: 100%;
				display: flex;
				flex: 1;
				justify-content: center;
				// background: red;
				color: #666;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.right {
		flex: 1;

		.start {
			// width: 524rpx;
			width: 100%;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			color: #fff;
		}

		.repariing {
			width: 100%;
			justify-content: space-between;

			view {}

			.add {
				background: #0091ff;
				margin-right: 14rpx;
				color: #fff;
				display: flex;
				flex: 1;
				justify-content: center;
				height: 70rpx;
				border-radius: 8rpx;
			}

			.addRecord {
				background: #f5fbff;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				display: flex;
				flex: 1;
				justify-content: center;
				height: 70rpx;
				border-radius: 8rpx;
				color: #0091ff;
			}

			.finish {
				background: #efefef;
				color: #cccccc;
				display: flex;
				flex: 1;
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			}
		}
	}
}

.infocard {
	width: calc(100% - 80rpx);
	border-radius: 8rpx;
	background-color: #fff;
	margin: 0rpx auto;
	margin-top: 20rpx;
	padding: 20rpx;
	line-height: 50rpx;
	position: relative;
	color: #333333;
	letter-spacing: 1rpx;

	.title {
		font-size: 32rpx;
		font-weight: bold;
		// color: #000;
		text-align: left;

		letter-spacing: 1rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.edit-btn {
			font-size: 24rpx;
			color: #0091ff;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-weight: normal;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 5rpx;
			}
		}

		.detail-btn {
			font-size: 24rpx;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-weight: normal;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 5rpx;
			}
		}
	}

	.tips {
		font-size: 24rpx;
		color: #999;
	}

	.ele-name {
		font-size: 28rpx;
		// font-weight: bold;
		// display: flex;
		color: #000;
		align-items: center;

		text {
			color: #0091ff;
			font-weight: normal;
			font-size: 22rpx;
			padding: 2rpx 5rpx;
			background: #dcf0ff;
			border-radius: 4rpx;
			margin-left: 10rpx;
			line-height: 30rpx;
			white-space: nowrap;
			// display: inline-block;
		}

		.deep {
			color: #fff;
			background: #0091ff;
		}
	}

	.main_card_item {
		display: flex;
		margin-top: 16rpx;

		.descBox {
			padding-bottom: 20rpx;

			.status_content {
				display: flex;
				flex-wrap: wrap;
				flex: 1;
			}

			.statusFault {
				padding: 0rpx 12rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
				margin-bottom: 20rpx;
				margin-left: 4rpx;
			}

			.stop {
				border: 2rpx solid #e02020;
				color: #e02020;
				margin-right: 12rpx;
			}

			.normal {
				border: 2rpx solid #0091ff;
				color: #0091ff;
				margin-right: 12rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}

			.title {
				font-weight: normal !important;
				font-size: 28rpx !important;
				color: #999 !important;
			}

			.content {
				font-size: 28rpx !important;
				color: #333;
			}
		}

		.label {
			margin-right: 24rpx;
			color: #999999;
			font-size: 28rpx;
			width: 140rpx;
		}

		.desc {
			display: flex;
			flex: 1;
			flex-wrap: wrap;
			color: #333;
			font-size: 28rpx;

			.tag {
				margin-right: 12rpx;
				border: 2rpx solid transparent;
				padding: 0rpx 12rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
			}

			.stop {
				border: 2rpx solid #e02020;
				color: #e02020;
			}

			.normal {
				border: 2rpx solid #0091ff;
				color: #0091ff;
			}
		}

		.phone {
			color: #0091ff;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-top: 6rpx;
			}
		}
	}

	.showMore {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999999;
		padding-top: 20rpx;

		.text_more {
			display: inline-block;
			margin-left: 12rpx;
			width: 12rpx;
			height: 12rpx;
			border-left: 2rpx #999 solid;
			border-bottom: 2rpx #999 solid;
			transform: rotate(-45deg);
			margin-bottom: 8rpx;
		}
	}

	.tag {
		margin-right: 12rpx;
		border-radius: 8rpx;
		padding: 0 24rpx;
		margin-bottom: 4rpx;
	}

	.stop {
		border: 2rpx solid #e02020;
		color: #e02020;
	}

	.normal {
		border: 2rpx solid #0091ff;
		color: #0091ff;
	}

	.info-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		align-items: baseline;

		&-label {
			min-width: 140rpx;
			color: #999;
		}

		&-content {
			flex: 1;
			line-height: 35rpx;
		}

		&-word {
			color: #0091ff;
			flex: 1;
			flex-direction: column;

			.fileName {
				width: 540rpx;
				// background: pink;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.imgs {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		image {
			width: 113rpx;
			height: 113rpx;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
	}

	.textarea {
		width: calc(100% - 44rpx);
		padding: 16rpx 20rpx;
		margin-top: 24rpx;
		border: 2rpx solid #e9e9e9;
		border-radius: 4rpx;
		padding-bottom: 7rpx;

		textarea {
			font-size: 28rpx;
			color: #333;
			width: 100%;
			height: 200rpx;
		}

		.num {
			font-size: 24rpx;
			text-align: right;
			color: #999999;
		}
	}
}

.change_elevator {
	display: flex;
	flex-direction: row;
	justify-content: center;

	.actElevator {
		// background-color: #0091ff;
		font-size: 24rpx !important;
		color: #0091ff !important;
		border: 2rpx #0091ff solid !important;
	}

	view:nth-of-type(1) {
		// background-color: #0091ff;
		color: #666;
		height: 72rpx;
		width: 176rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 8rpx;
		border: 2rpx #ccc solid;
		font-size: 24rpx;
		margin-right: 60rpx;
	}

	view:nth-of-type(2) {
		font-size: 24rpx;
		color: #666;
		height: 72rpx;
		width: 176rpx;
		line-height: 72rpx;
		text-align: center;
		border-radius: 8rpx;
		border: 2rpx #ccc solid;
	}
}
.card-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .expanded{
    font-size: 28rpx;
    color: #0091FF;
  }
}

.related-parts-section {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 16rpx 24rpx;
  .related-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 16rpx;
    color: #333;
    &:before {
      content: '';
      display: inline-block;
      width: 4rpx;
      height: 24rpx;
      background-color: #0091FF;
      margin-right: 8rpx;
    }
  }
  .related-parts-list {
    .related-part-item {
      display: flex;
      padding: 16rpx 0;
      border-bottom: 1px solid #e9e9e9;
      &:first-child {
        padding-top: 0;
      }
      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
      .part-image {
        width: 114rpx;
        height: 114rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      .empty-image{
        width: 114rpx;
        height: 114rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        &-text{
          font-size: 20rpx;
          color: #999;
          line-height: normal;
        }
        background: #E2E2E2;
      }
      .part-details {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .part-name {
          line-height: normal;
          margin-bottom: 12rpx;
          font-size: 28rpx;
          color: #3D3D3D;
        }
        .part-info-row {
          font-size: 24rpx;
          display: flex;
          line-height: normal;
          margin-bottom: 8rpx;
          &:last-child {
            margin-bottom: 0;
          }
          .label {
            white-space: normal;
            color: #999;
            margin-right: 10rpx;
          }
          .value {
            width: 0;
            flex: 1;
            color: #333;
          }
        }
      }
    }
  }
}
/deep/.drowdown .menu{
  max-height: 30vh;
  overflow-y: auto;
}
</style>
